import { InjectionKey } from 'vue'
import { createStore, Store, useStore as baseUseStore } from 'vuex'
import { app } from './moduels/app'
import { user } from './moduels/user'
import { list } from './moduels/list'
import { storagePlugin } from './plugin/storage'

import { ListState } from '@/types/list'
import { UserState } from '@/types/user'
import { AppState } from '@/types'

// define your typings for the store state
export interface State {}

export interface AllStateTypes extends State {
	app: AppState
	user: UserState
	list: ListState
}

export const store = createStore<State>({
	modules: { app, user, list },
	plugins: [storagePlugin]
})

// define injection key
export const key: InjectionKey<Store<State>> = Symbol()

// define your own `useStore` composition function
export function useStore<T = AllStateTypes>() {
	return baseUseStore<T>(key)
}
